<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-14 16:42:20
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-19 13:50:54
 * @FilePath: \company-world\src\views\home\home.vue
 * @Description: 整体布局：菜单栏 头部
-->
<template>
  <div class="home">
    <!-- 侧边菜单栏 -->
    <div class="home-menu">
      <NavigationBar
        :showMenus="showMenus"
        @addMenuClick="addMenuClick"
        @menuItemClick="menuItemClick"
        :menusList="dataList"
      />
      <SubMenuColumn
        v-if="currentData && currentData.children && currentData.children.length !== 0"
        :currentData="currentData"
        :showMenus="showMenus"
        @closeMenuBar="closeMenuBar"
      />
    </div>
    <div class="home-content">
      <!-- 头部 -->
      <div class="home-tool">
        <Banner :menuList="dataList" />
      </div>
      <div class="home-content-view">
        <router-view></router-view>
      </div>
    </div>
    <!-- 增加菜单 -->
    <ApplicationMarket :menusList="dataList" :showMenu="showMenu" @handleSave="handleSave" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import NavigationBar from './components/NavigationBar.vue'
import SubMenuColumn from './components/SubMenuColumn.vue'
import ApplicationMarket from './components/ApplicationMarket.vue'
import Banner from './components/Banner.vue'
import { useRouter } from 'vue-router'
import { getMenuList } from '@/apis/jurisdiction/menu'
import { IMenu } from '@/views/menuManagement/config/menus'
import { ElMessage } from 'element-plus'
/**
 * @desc: 新增菜单
 */
const showMenu = ref(false)
const addMenuClick = (show: boolean) => {
  showMenu.value = show
}
/**
 * @desc: 获取菜单列表数据
 *
 */
interface Imenu {
  [key: string]: any
}
const loading = ref(false)
let dataList: Imenu = ref({})
const getData = () => {
  loading.value = true
  getMenuList()
    .then((res) => {
      if (!res) return
      if (res) {
        dataList.value = res
      }
      loading.value = false
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}
getData()
/**
 * @desc: 保存后刷新
 */
const handleSave = () => {
  getData()
}
/**
 * @desc: 获取当前点击菜单数据
 */
const showMenus = ref(false)
let currentData: Imenu = ref()
const router = useRouter()

const menuItemClick = (data: Imenu, show: boolean) => {
  currentData.value = data
  showMenus.value = show
}
/**
 * @desc: 关闭菜单栏
 */
const closeMenuBar = (show: boolean) => {
  showMenus.value = !showMenus.value
}
</script>

<style lang="less" scoped>
.home {
  display: flex;
  width: 100%;
  height: 100%;
  background: #f8f7fb;
  .home-menu {
    display: flex;
    width: auto;
    height: 100%;
    background-color: #fff;
    z-index: 1;
  }
  .home-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .home-tool {
      width: 100%;
      height: auto;
      display: flex;
      align-content: center;
      padding: 0 23px 0 23px;
      box-sizing: border-box;
    }
    .home-content-view {
      flex: 1;
      overflow: hidden;
      background-color: #f6f8f9;
      margin: 7px 23px 14px 23px;
      padding: 11px 0 6px 0;
      box-sizing: border-box;
      border-radius: 8px 8px 0 0;
    }
  }
}
</style>
